<!doctype html>
<html>

	<head>
		<title>订单详情(已预约)</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/style.css">
		<style>
			.checkeder {
				color: #fb8714;
				background-image: url(assets/images/you.png);
				background-color: #eee;
				background-size: 1.95rem;
				background-repeat: no-repeat;
				background-position: 97% center;
			}
			.touristShow{display:block}
		</style>
	</head>

	<body>
		<div class="containter">
			<header data-am-widget="header" class="am-header am-header-default">
				<div class="am-header-left am-header-nav">
					<a href="javascript:;" onClick="javascript :history.back(-1);">
						<img src="assets/images/left.png">
					</a>
				</div>
				<h1 class="am-header-title">
      订单详情
    </h1>
			</header>
			<div style="width: 100%; height:4rem;"></div>
			<div class="dingdan">
				<h3><img src="assets/images/f1.png">线路信息</h3>
				<ul class="ly">
					<!--<li>
						<a href="">
							<img src="assets/images/image.png" alt="">
							<span>深圳市出发</span>
						</a>
						<div class="order-right">
							<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
							<span>行程天数：4天</span><b>￥1899</b>
							<font>旅游团期：2014-04-18至2014-04-20</font>
						</div>
					</li>-->
				</ul>
				<h3><img src="assets/images/f2.png">联系人信息</h3>
				<div class="xx">
					<p><img src="assets/images/f3.png">姓名<span id="linkman_name"></span></p>
					<p><img src="assets/images/f5.png">手机号码<span id="linkman_phone">12456457788</span></p>
				</div>
				<h3 class="touristShow"><img src="assets/images/f4.png">游客信息 <font class="total_num">0人</font></h3>
				<div class="xx" id="tourist_list">
					<!--<p><img src="assets/images/f3.png">刘杰
						<font>13065458789</font>
					</p>-->
				</div>
				<!-- <h3><img src="assets/images/f4.png">保险信息</h3>
    <div class="xx">
      <p>人寿保险<b style="margin-left: 1rem; color: #ff7bac">￥0</b><font>×1</font></p>
    </div> -->
    			<div style="height:4rem;"></div>
			</div>
			
			<div class="dd-footer">
				<span class="left_span">
					<span>总价：</span>
					<font style="font-weight: 900;">￥<label id="total_price">0</label></font>
				</span>
				<button id="btn_right" class="btn-yy" type="button">立即付款</button>
			</div>
		</div>

		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/amazeui.min.js"></script>
		<script src="assets/js/allUse.js"></script>
		<!--6.7取消预约-->
		<script type="text/javascript">
//			$(".btn-yy").click(function() {
//
//				$.ajax({
//					type: "post",
//					url: "http://119.23.70.141/api/cancel_book_order",
//					headers: {
//						"User-Token": "abc",
//						"Os": localStorage.ios_Andriod,
//						"Device-Id": "pc",
//						"Screen": localStorage.wh,
//						"Content-Type": "application/x-www-form-urlencoded"
//					},
//					data: {
//						//						“order_id”:1,//订单ID序列号，整数类型（Int）
//						//“signature”:””//签名，user_id和order_id使用横杆（-）连接后使用md5 hash加密字串
//					},
//					success: function(data, status, xhr) {
//						//无返回参数
//						console.log(data);
//					},
//					error: function(xhr, status, thrown) {
//						console.log(xhr);
//					}
//				});
//			});
		</script>
		<!--6.8订单详情-->
		<script type="text/javascript">
			$(document).ready(function(){
				if(sessionStorage.getItem("Myorder_no")){//订单详情
					var Myorder_no=JSON.parse(sessionStorage.getItem("Myorder_no"));
					$.ajax({
						type: "post",
						url:url_enter+"/apk/get_order_detail",
						headers: {
							"User-Token":token,
							"Os":ios_Andriod,
							"Device-Id":"",
							"Screen":wh,
							"Content-Type": "application/x-www-form-urlencoded"
						},
						data: {
							"order_no":""+Myorder_no.Myorder_no+""
						},
						success: function(data, status, xhr) {
							console.log(data);
							$(".ly").append('<li><div style="width:7.5rem;height:7.5rem;float: left;margin:1rem 0;position: relative;"><img style="height:100%;width:100%" src="'
							+data.data.image+'" alt=""><span style="position: absolute;bottom: 0;left:0;width: 100%;background: rgba(0,0,0,0.6);color:#fff;text-align: center;">'
							+data.data.depart+'出发</span></div><div class="order-right"><h2>'
							+data.data.title+'</h2><span>行程天数：'
							+data.data.days+'天</span><b>￥'
							+data.data.price+'</b><font>旅游团期：<span>'
							+data.data.time_start+'</span>至<span>'
							+data.data.time_end+'</span></font></div></li>');
							$("#linkman_name").html(data.data.names);
							$("#linkman_phone").html(data.data.phone_num);
							$("#total_price").html(data.data.order_price);
							$(".total_num").html(data.data.tourist_num+"人");
							switch(parseInt(data.data.status)){
								case 1://
									$("#btn_right").html("已付款").removeClass("btn-yy");break;
								case 2:	
									$("#btn_right").html("已取消").removeClass("btn-yy");break;
								case 0:
									$("#btn_right").html("立即付款")
									$("#btn_right").click(function(){
										window.location.href="pay.html"
									});break;
							};

							if(!data.data.tourist_list.length){
								$(".touristShow").css("display","none")
								return;
							};
							for(var i=0;i<data.data.tourist_list.length;i++){
								$("#tourist_list").append('<p><img src="assets/images/f3.png">'
								+data.data.tourist_list[i].real_name+'<font>'
								+data.data.tourist_list[i].phone_num+'</font></p>')
							};
							
													},
						error: function(xhr, status, thrown) {
							console.log(xhr);
						}
					});
				
				
				
				
				
				
				
				
				}
				})
			
		</script>

	</body>

</html>